@use '../../../styles/theme/variables.scss' as *;

$module: '#{$sun-prefix}-divider';

.#{$module} {
  // ================ 分割线方向 ================
  // 水平分割线: 总高度为1px,宽度为100%，使用上边框展示出分割线
  &-direction-horizontal {
    display: flex;
    align-items: center;
    width: 100%;
    border-top-width: 1px;
    border-top-color: var(--semi-color-border);

    // ================ 分割线类型 ================
    // 交集选择器， 如果 元素有 .sun-ui-divider-direction-horizontal 类名，且有 .sun-ui-divider-type-dashed 类名，则设置分割线样式为dashed
    &.#{$module}-type-dashed {
      border-top-style: dashed;

      // 带内容时，分割线元素的样式也设置为dashed
      .#{$module}-line {
        border-top-style: dashed;
      }
    }

    &.#{$module}-type-dotted {
      border-top-style: dotted;

      .#{$module}-line {
        border-top-style: dotted;
      }
    }

    &.#{$module}-type-solid {
      border-top-style: solid;

      .#{$module}-line {
        border-top-style: solid;
      }
    }

    // ================ 带内容时 ================
    &.#{$module}-has-content {
      // 不使用上边框来实现分割线
      border-top: none;
    }

    // 实现分割线的元素
    .#{$module}-line {
      flex: 1;
      min-width: 20px;
      height: 1px;
      border-top-width: 1px;
      border-top-color: var(--semi-color-border);

      // border-top-style: solid; // 分割线类型 由父元素有什么样的 css 类名来决定，
    }

    // 分割线内容元素
    .#{$module}-content {
      padding: 0 $spacing-base-tight;

      &-bold {
        font-weight: bold;
      }
    }
  }

  // 垂直分割线: 高度为1em，总宽度为1px，使用左边框展示出分割线
  &-direction-vertical {
    display: inline-flex;
    height: 1em;
    border-left-width: 1px;
    border-left-color: var(--semi-color-border);
    vertical-align: middle;

    // ================ 分割线类型 ================
    // 交集选择器
    &.#{$module}-type-dashed {
      border-left-style: dashed;
    }

    &.#{$module}-type-dotted {
      border-left-style: dotted;
    }

    &.#{$module}-type-solid {
      border-left-style: solid;
    }
  }
}
